<template>
  <a-carousel :after-change="onChange" autoplay="true">
    <!--    <img v-for="item of list"-->
    <!--         :key="item.id"-->
    <!--         :src="item"-->
    <!--         class="img"-->
    <!--    >-->
    <a-image v-for="item of list"
             :key="item.id"
             :src="item"
             class="img"/>
  </a-carousel>
</template>
<script>
import {defineComponent} from 'vue';

export default defineComponent({
  name: 'Header',
  props: {
    list: Array
  },
  setup(props) {
    const onChange = current => {
      // console.log(current);
    };

    return {
      onChange,
    };
  },

});
</script>
<style scoped>
/* For demo */
.ant-carousel :deep(.slick-slide) {
  text-align: center;
  height: 4rem;
  line-height: 2rem;
  background: #364d79;
  overflow: hidden;
}

.ant-carousel :deep(.slick-slide h3) {
  color: #fff;
}

.ant-carousel .img {
  width: 100%;
  height: auto;
  object-fit: cover;
}
</style>